<template>
   <!-- 
       size-change：每页显示的条数
       current-change：跳转到当前页
       current-page:当前页
       total：共多少条
       prev：前进
       next：后退
       jumper：快捷跳转
    -->
   <div class="container">
     
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
   </div> 
  
</template>

<script>
export default {
    props:['total'],
    data(){
        return{
            currentPage4:1
        }
    },
    methods: {
      //每页多少条切换事件
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        //修改父组件pageSize
        this.$parent.pageSize = val
        //刷新表格
        this.$emit('resetTablefun')
      },
      //当前页面切换事件
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        //val传递给父主键page
        this.$parent.page = val
        //刷新表格
        this.$emit('resetTablefun')

      },
      chackAll(){
      this.$bus.$emit('chackAll')
      },
      batchdele(){
        console.log('dianjishanchu');

      }
    },

}
</script>

<style scoped>
.container{
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}



</style>